<template>
  <el-dialog
    v-el-drag-dialog="{ drag: true, full: true, resize: true }"
    title="车辆系列"
    :width="'400px'"
    :close-on-click-modal="false"
    :visible.sync="md.state"
    @close="closeMd"
    v-if="md.state"
  >
    <el-form :model="fm.ps" ref="formRef" :label-width="'100px'">
      <el-form-item
        label="车辆品牌"
        prop="carBrandId"
        :rules="[
          { required: true, message: '请选择车辆品牌', trigger: 'blur' },
        ]"
      >
        <el-select
          v-model="fm.ps.carBrandId"
          :placeholder="'车辆车辆品牌'"
          style="width: 100%"
        >
          <el-option
            v-for="(it, index) in signList"
            :key="index + 'info'"
            :label="it.brandName"
            :value="it.brandName"
            @click.native="handleTypeChoice(it.id)"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="系列名称"
        prop="trainName"
        :rules="[
          { required: true, message: '请输入车辆系列名称', trigger: 'blur' },
        ]"
      >
        <el-input
          v-model="fm.ps.trainName"
          placeholder="请输入车辆系列名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="车辆配置" prop="carConfig">
        <el-input
          v-model="fm.ps.carConfig"
          placeholder="请输入车辆配置"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" :disabled="fm.sb.load">{{
          fm.sb.text
        }}</el-button>
        <el-button @click="closeMd">关闭</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import elDragDialog from "@/directive/el-drag-dialog";
import {
  trainAdd,
  trainUpdate,
  findTrainById,
  findTrainList,
  findBrandList,
} from "@/api/services/common.service";

export default {
  name: "addSeries",
  directives: { elDragDialog },
  props: ["state", "isEditId"],
  components: {},
  data() {
    return {
      md: { state: this.state },
      fm: {
        fname: "addGroupFm",
        typeId: "",
        ps: {
          carBrandId: "", //车辆品牌
          carConfig: "", // 车辆配置
          trainName: "", // 系列名称
        },
        sb: {
          load: false,
          text: "添加",
        },
      },
      loading: false,
      signList: null,
    };
  },
  created() {
    this.getDgList();
    if (!!this.isEditId) {
      this.getListById();
    }
  },
  methods: {
    // 通过ID 获取到对象
    getListById() {
      findTrainById({ id: this.isEditId }).then((res) => {
        if (res.code == 1) {
          // addTime: "2021-05-13 23:31:30";
          // carBrandId: 76;
          // carConfig: null;
          // hotOrder: 0;
          // trainName: "捷达单";
          // unitNum: "8112010001";
          const { carBrandId, carConfig, trainName } = res.data;

          this.fm.ps = {
            carBrandId: String(carBrandId),
            carConfig,
            trainName,
          };
          console.log(this.fm.ps, "ressss");
        } else {
          that.U.qsuccess(res.msg);
        }
      });
    },
    /* 关闭弹框 */
    closeMd() {
      this.$emit("getMdState", false);
    },
    // handleTypeChoice
    handleTypeChoice(id) {
      this.typeId = id;
    },
    /** 获取-分页列表数据 */
    getDgList() {
      findBrandList({ page: 1, rows: 9999 })
        .then((res) => {
          const { code, data } = res;
          if (code === 1) {
            this.signList = data;
            console.log(this.signList, "signListsignListsignList");
          } else {
            this.U.qclose(res.msg);
          }
        })
        .catch((err) => {
          this.U.qclose(err);
        });
    },

    /**
     * 提交表单
     */
    onSubmit() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.fm.sb.load = true; // 添加按钮禁用效果
          let loading = this.U.qloading("提交中，请稍后..."); // 添加遮
          // this.fm.ps.carBrandId = this.typeId;
          const fet = !!this.isEditId ? trainUpdate : trainAdd;
          const pd = !!this.isEditId
            ? {
                ...this.fm.ps,
                id: this.isEditId,
              }
            : {
                ...this.fm.ps,
                carBrandId: this.typeId,
              };
          fet(pd)
            .then((res) => {
              this.fm.sb.load = false; // 取消按钮禁用效果
              this.U.qclose(loading); // 关闭遮罩
              if (!res || res.code !== 1) {
                this.U.qerror(res.msg);
              } else {
                this.U.qsuccess(res.msg);
                this.closeMd();
                this.$emit("reloadDg");
              }
            })
            .catch(() => {
              this.U.qclose(loading);
            });
        }
      });
    },
  },
};
</script>